<template>
  <view class="dy-scroll-container">
    <dy-navbar title="loading" />
    <scroll-view class="dy-scroll" scroll-y>
      <dy-card padding="0">
        <dy-section slot="title" padding="24" title="基础用法" />
        <template slot="body">
          <view class="dy-justify-around dy-pd-24 ">
            <dy-loading show>示例1</dy-loading>
            <dy-loading show vertical>示例2</dy-loading>
          </view>
        </template>
      </dy-card>

      <dy-card padding="0">
        <dy-section slot="title" padding="24" title="图标类型" />
        <template slot="body">
          <view class="dy-justify-around dy-pd-24 ">
            <dy-loading show type="spinner">示例3</dy-loading>
            <dy-loading show type="round">示例4</dy-loading>
          </view>
        </template>
      </dy-card>

      <dy-card padding="0">
        <dy-section slot="title" padding="24" title="图标样式" />
        <template slot="body">
          <view class="dy-justify-around dy-pd-24  dy-align-center">
            <dy-loading show type="round">示例5</dy-loading>
            <dy-loading show type="round" color="#ff508a">示例6</dy-loading>
            <dy-loading show type="round" color="#ff508a" size="50">示例7</dy-loading>
          </view>
        </template>
      </dy-card>

      <dy-card padding="0">
        <dy-section slot="title" padding="24" title="文字样式" />
        <template slot="body">
          <view class="dy-justify-around dy-pd-24  dy-align-center">
            <dy-loading show type="round" text-size="24">示例8</dy-loading>
            <dy-loading show type="round" color="#ff508a" text-size="36">示例9</dy-loading>
            <dy-loading
              show
              type="round"
              color="#ff508a"
              text-size="24"
              :text-style="{ color: 'red', fontWeight: '700', fontSize: '48rpx' }"
            >
              示例10
            </dy-loading>
          </view>
        </template>
      </dy-card>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'Loading'
}
</script>
